<!-- Created by duwanfu on 2018/10/27 -->
<template>
  <div class="order">
    <div class="order-header">
      <div class="author fl">
        <img :src="userInfo.headPortrait" alt="">
      </div>
      <div class="user-info fl">
        <p>{{userInfo.name}}</p>
        <p>{{userInfo.rank}}</p>
      </div>
      <!--<div class="service">专属客服</div>-->
      <!--<a :href="'tel:' + tel" class="call"></a>-->
    </div>
    <div class="chose-grade">
      <p>请选择等级：</p>
      <div class="grade">
        <div @click="choseGrade(index, item.money)" v-for="(item, index) in grade" :class="index === activeIndex ? 'active' : ''">
          {{item.value}}
        </div>
      </div>
    </div>
      <div class="money">
      <span class="fl">支付金额:</span>
      <span class="fr">{{money}}元</span>
    </div>
    <div class="order-way">
      <mt-radio align="right"
                class="page-part"
                title="支付方式"
                v-model="value"
                :options="options">
      </mt-radio>
    </div>
    <div @click="pay" class="order-btn">确认支付</div>
  </div>
</template>

<script>
  import {browserMixin} from '../../assets/js/mixin'
  import { Toast } from 'mint-ui';
  export default {
    name: "order",
    mixins: [browserMixin],
    data() {
      return {
        value: 'wx',
        options: [
          {
            label: '微信支付',
            value: 'wx',
            readOnly: true
          },
          {
            label: '支付宝支付',
            value: 'ali',
            disabled: true
          },
        ],
        activeIndex: null,
        grade: [
          {
            value: '创业者',
            money: 66
          },
          {
            value: '创业家',
            money: 166
          },
          {
            value: '合伙人',
            money: 266
          }
        ],
        // money: 66,
        userInfo: {
          headPortrait: '',
          name: '',
          rank: '',
          grade: ''
        }
      }
    },
    computed: {
      memberGrade () {
        return this.activeIndex + 1
      },
      payMoneyed () {
        let money
        let grade = this.userInfo.grade
        switch (grade) {
          case 0 :
            money = 0
            break
          case 1 :
            money = 66
            break
          case 2 :
            money = 166
            break
          case 3 :
            money = 266
            break
        }
        return money
      },
      money () {
        let money
        let activeIndex = this.activeIndex
        switch (activeIndex) {
          case 0 :
            money = 66
            break
          case 1 :
            money = 166
            break
          case 2 :
            money = 266
            break
          default :
            money = 0
            break
        }
        return money - this.payMoneyed
      }
    },
    mounted () {
      this.getMineInfo()
    },
    methods: {
      choseGrade (index, money) {
        if (this.userInfo.grade <= index) {
          this.activeIndex = index
          this.money = money - this.payMoneyed
        } else {
          Toast({
            message: '请选择高于目前等级的！'
          })
        }
      },
      pay() {
        let isWexin = this.isWexin;
        if(isWexin) {
          if (typeof WeixinJSBridge == "undefined") {
            if (document.addEventListener) {
              document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
            } else if (document.attachEvent) {
              document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
              document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
            }
          } else {
            this.onBridgeReady();
          }
        }else {
          this.appPay()
        }
        // return false;
      },
      onBridgeReady() {
        let params={
          // payType: 1,
          memberGrade: this.memberGrade
        };

        this.$http.pay(params).then(res => {
          if (!res) {
            console.log('出现错误')
          } else {
            WeixinJSBridge.invoke(
              'getBrandWCPayRequest', {
                "appId": res.appId,     //公众号名称，由商户传入
                "timeStamp": res.timeStamp,         //时间戳，自1970年以来的秒数
                "nonceStr": res.nonceStr, //随机串
                "package": res.packageValue,
                "signType": "MD5",         //微信签名方式:
                "paySign": res.paySign    //微信签名
              },
              function (res) {
                if (res.err_msg == "get_brand_wcpay_request:ok") {
                  // 使用以上方式判断前端返回,微信团队郑重提示：
                  //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
                }
              });
          }
        }).catch(err => {
          let msg = err.message || err.status;
          console.log(msg);
        })

      },
      appPay() {
        let params = {
          // payType: '2',
          memberGrade: this.memberGrade
        }
        this.$http.pay(params).then(res=> {
          let url = res.data.mwebUrl;
          let uri = encodeURIComponent('http://treasure.jingyugg.com/dist/index.html#/orderComplete')
          debugger
          location.href = url + `&redirect_url=${uri}`;
        }).catch(err=> {
          console.log(err);
        })
      },
      getMineInfo() {
        this.$http.getMineInfo().then(res=>{
          if(res.message == '成功') {
            let data = res.data;
            this.userInfo.headPortrait = data.headPortrait
            this.userInfo.name = data.name
            this.userInfo.rank = data.rank
            this.userInfo.grade = data.grade
            this.activeIndex = data.grade
          }
        })
      },
    }
  }
</script>

<style lang="scss" scoped>
  .order {
    min-height: 100vh;
    background: #f1f0ee;
    .order-header {
      position: relative;
      width: 100%;
      height: 1.58rem;
      box-sizing: border-box;
      /*background: url(../../assets/imgs/order-bg.png) no-repeat;*/
      background: #dd001b;
      background-size: 100% 1.58rem;
      /*margin-top: .2rem;*/
      padding: 0 .3rem;
      overflow: hidden;
      .author {
        width: .98rem;
        height: .98rem;
        margin: .3rem 0;
        background: #ffc7c7;
        border-radius: 50%;
        overflow: hidden;
        margin-right: .2rem;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .user-info {
        color: #ffffff;
        p:nth-child(1) {
          padding-top: .5rem;
          font-size: .26rem;
        }
        p:nth-child(2) {
          padding-top: .2rem;
          font-size: .26rem;
        }

      }
      /*.service {
        overflow: hidden;
        position: absolute;
        width: 3rem;
        top: .5rem;
        right: -1.05rem;
        height: .5rem;
        line-height: .5rem;
        text-indent: .9rem;
        font-size: .2rem;
        background: #000;
        color: #e4c990;
        transform: rotate(45deg) translateY(-50%);
      }*/
      /*.call {
        position: absolute;
        width: .5rem;
        height: .5rem;
        top: 60%;
        transform: translateY(-50%);
        right: .3rem;
        background: url("../../assets/imgs/icon-phone.png") no-repeat;
        background-size: .5rem;
      }*/
    }
    .chose-grade {
      padding: .3rem;
      background: #fff;
      margin-top: .2rem;
      p {
        font-size: .26rem;
      }
      .grade {
        display: flex;
        justify-content: space-around;
        margin-top: .3rem;
        div {
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: .28rem;
          width: 1.6rem;
          height: .66rem;
          overflow: hidden;
          box-sizing: border-box;
          border: 1px solid #dd001b;
          border-radius: 3px;
          color: #dd001b;
        }
        div.active {
          background: #dd001b;
          color: #ffffff;
        }
      }
    }
    .money {
      width: 100%;
      height: .88rem;
      margin-top: .2rem;
      line-height: .88rem;
      background: #ffffff;
      box-sizing: border-box;
      padding: 0 .3rem;
      font-size: .26rem;
      span:nth-child(2) {
        font-size: .3rem;
        color: #dd001b;
      }
    }
    .order-way {
      width: 100%;
      box-sizing: border-box;
      /deep/ .mint-radiolist .mint-radiolist-title {
        margin: 0 0 0 .3rem;
        line-height: .9rem;
        font-size: .26rem !important;
      }
      /deep/ .mint-cell:nth-child(2) {
        padding: 0 .3rem;
        background: #fff url("../../assets/imgs/icon-wxpay.png") no-repeat .3rem center;
        background-size: .54rem;
        div:nth-child(2) {
          background-image: -webkit-gradient(linear, left top, left bottom, from(#d9d9d9), color-stop(50%, #d9d9d9), color-stop(50%, transparent));
          background-size: 120% 0px !important;
        }
      }
      /deep/ .mint-cell:nth-child(3) {
        padding: 0 .3rem;
        background: #fff url("../../assets/imgs/icon-alipay.png") no-repeat .3rem center;
        background-size: .54rem;
      }
      /deep/ .mint-cell-wrapper {
        padding: 0;
      }
      /deep/ .mint-radio-label {
        font-size: .26rem;
      }
      /deep/ .mint-radio-label {
        padding-left: .4rem;
      }
      /deep/ .mint-radiolist-label {
        padding-right: 0;
      }
    }
    .order-btn {
      width: 80%;
      height: .9rem;
      border-radius: .1rem;
      margin: .3rem auto;
      background: #dd001b;
      text-align: center;
      line-height: .9rem;
      font-size: .3rem;
      color: #ffffff;
    }
  }
</style>
